<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/takenum.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/takenum.js"></script>

    <title>取号详情页</title>
</head>

<body>
    <div class="takenum_3Q">

        <!-- 店铺信息 -->
        <div class="store_information">
            <p class="information_title">武汉商务区·匠心汇店</p>
            <div class="information_add">
                武汉市 江汉区 武汉商务区地铁站匠心汇B18-7商铺
                <div>
                    <img src="images/takenum/top.png" alt="">
                </div>
            </div>
            <p class="information_time">营业时间：09:00 - 22:30</p>
        </div>

        <!-- 优惠信息栏 -->
        <div class="count">
            <div class="count_text">
                <div>惠</div>
                <text>限时优惠 买5赠1 买10赠3 全市通用</text>
            </div>
            <text class="count_right">></text>
        </div>

        <!-- 提供服务栏 -->
        <div class="count serve">
            <div class="count_text">
                <img src="images/takenum/icon1.png" alt="">
                <img src="images/takenum/icon2.png" alt="">
                <img src="images/takenum/icon3.png" alt="">
                <img src="images/takenum/icon4.png" alt="">
            </div>
            <text class="count_right">></text>
        </div>

        <!-- 发型师 -->
        <div class="hairstylist">
            <img class="hairstylist_img hairstylist_details" src="" />
            <div class="hairstylist_information hairstylist_details">
                <div class="hair_name">Gilbert</div>
                <div class="hair_icon">
                    <img src="images/takenum/icon1.png" alt="">
                    <img src="images/takenum/icon1.png" alt="">
                </div>
                <div class="hair_status">
                    有两位顾客在等待
                </div>
            </div>
            <div class="hairstylist_takenum">
                <div class="hair_num-price">
                    <span>￥</span>39</div>
                <div class="hair_num-btn" id="takenum_btn">一键取号</div>
            </div>
        </div>

        <div class="hairstylist">
            <img class="hairstylist_img hairstylist_details" src="" />
            <div class="hairstylist_information hairstylist_details">
                <div class="hair_name">Gilbert</div>
                <div class="hair_icon">
                    <img src="images/takenum/icon1.png" alt="">
                    <img src="images/takenum/icon1.png" alt="">
                </div>
                <div class="hair_status">
                    有两位顾客在等待
                </div>
            </div>
            <div class="hairstylist_takenum">
                <div class="hair_num-price">
                    <span>￥</span>39</div>
                <div class="hair_num-btn" id="takenum_btn">一键取号</div>
            </div>
        </div>

        <div class="hairstylist">
            <img class="hairstylist_img hairstylist_details" src="" />
            <div class="hairstylist_information hairstylist_details">
                <div class="hair_name">Gilbert</div>
                <div class="hair_icon">
                    <img src="images/takenum/icon1.png" alt="">
                    <img src="images/takenum/icon1.png" alt="">
                </div>
                <div class="hair_status">
                    有两位顾客在等待
                </div>
            </div>
            <div class="hairstylist_takenum">
                <div class="hair_num-price">
                    <span>￥</span>39</div>
                <div class="hair_num-btn" id="takenum_btn">一键取号</div>
            </div>
        </div>

        <!-- 评分模块 -->
        <div class="grade">
            <div class="store_grade">
                <div class="grade_top">4.7</div>
                <div class="grade_bottom">店铺评分</div>
            </div>
            <div class="grade_center"></div>
            <div class="takepartin_grade">
                <div class="grade_top">270
                    <span>人</span>
                </div>
                <div class="grade_bottom">参与评分</div>
            </div>
        </div>

        <!-- 底部tab栏 -->
        <div class="footer_tab">
            <div class="f_nav">
                <div class="tab_active"></div>
                <img src="images/index/index.png" alt="">
                <text>首页</text>
            </div>
            <div class="f_nav">
                <div></div>
                <img src="images/index/dingdan.png" alt="">
                <text>订单</text>
            </div>
            <div class="f_nav">
                <div></div>
                <img src="images/index/wode.png" alt="">
                <text>我的</text>
            </div>
        </div>
    </div>

    <!-- 选择地图操作表 -->
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
        <div class="mui-select_title">
            选择导航方式
        </div>
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#">高德地图</a>
            </li>
            <li class="mui-table-view-cell">
                <a href="#">百度地图</a>
            </li>
            <li class="mui-table-view-cell">
                <a href="#">手机默认导航</a>
            </li>
        </ul>
        <div class="sheet-line"></div>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell cancel_btn">
                <a href="#sheet1">
                    <b>取消</b>
                </a>
            </li>
        </ul>
    </div>

    <!-- 自定义位置弹出层 -->
    <div id="div"></div>
    <div id="popover" class="mui-popover" style="height: 250px;">
        <div class="mui-popover-arrow"></div>
        <div class="mui_popover-content">
            <div class="popover_title">
                <text class="popover_title-text">一键取号
                    <img class="popover_title-img" src="images/detele.png" alt="">
                </text>
            </div>
            <div class="popover_price">
                <div class="popover_price-num">
                    <span>￥</span>39 </div>
                <div class="popover_hairname"> Gilbert</div>
            </div>
            <div class="popover_hint">请安排好时间及时到店</div>
            <button class="popover_btn" id="comfirm_takenum">确认取号</button>
        </div>
    </div>

    <script>
    //     var mask = mui.createMask() //callback为用户点击蒙版时自动执行的回调；
    // /* 点击一键取号 */
    // // $(".hair_num-btn").alert("<div class='da'><span class='xiao'>￥</span>39</div>Gilbert\n请安排好时间及时到店","一键取号")
    // $(".hair_num-btn").on({touchstart:function() {
    //     console.log("点击了")
    //     mask.show()
    // }
    // })
    </script>

</body>

</html>